//本函数只是个调用函数，功能在于打开Dialog，则还需引入Dialog才能渲染出弹窗效果
//想要外界可用则直接导出核心函数，参数用options来接收
import Dialog from './Dialog.vue';
//需要实现创建页面的功能则需要引入createApp
import { createApp,h } from 'vue';
export const showDialog = (options)=>{
    //从options中读取具体参数
    const {title,content,ok,cancel} = options;
    //需要把Dialog内容放入一个div中而非body，否则body原先内容可能失效
    const div=document.createElement('div');
    //在页面的body中加入div（定义为div标签）
    document.body.appendChild(div);
    const close = ()=>{
        //关闭弹窗：取消挂载和移除div标签元素
        app.unmount(div);
        div.remove();
    }
    //通过createApp创建vue实例来渲染出Dialog的页面,然后再将div挂载到app上面
    //或者使用render()函数，需要返回h来接收再渲染Dialog和各种相关的参数，因为直接createApp渲染Dialog无法接收可视化visible值的改变
    const app = createApp({
        render() {
            return h(Dialog,
                //这对象所有属性都被识别成Dialog属性，然后与Dialog的props属性相对应且作为其参数传值使用
                {visible:true,
            //监听Dialog组件中close关闭条件的参数
            "onUpdate:visible":(newVisible)=>{
                if(newVisible===false){
                    close();
                }
            },
            ok,cancel
            },{title,content});
        },
    });
    app.mount(div);
} 